<template>
	<view class="avtivity_wrap">
		<view class="title">{{ detail.title }}</view>
		<view class="company_item flex-ali justify-between">
			<view class="company_size"></view>
			<view class="time">{{ detail.createtime }}</view>
		</view>
		<view class="flex-col mt-26">
			<text class="self-start text_4">活动详情</text>
			<view class="flex-row items-center self-stretch group_3">
				<image class="image_8" :src="remoteUrl + 'time_icon.png'" />
				<text class="font ml-10">{{ detail.start_time }}至{{ detail.end_time }}</text>
			</view>
			<view class="flex-row self-stretch group_4">
				<image class="self-start image_8" :src="remoteUrl + 'city_icon.png'" />
				<text class="flex-1 font ml-10">{{ detail.address }}</text>
			</view>
			<view class="flex-row items-center self-stretch group_5">
				<image class="image_8" :src="remoteUrl + 'people_icon.png'" />
				<text class="font text_7">已报名人数</text>
				<text class="font text_8">{{ detail.user_count }}/{{ detail.number }}人</text>
			</view>
			<view class="flex-row items-center self-stretch group_6">
				<image class="image_8" :src="remoteUrl + 'price_icon.png'" />
				<text class="font ml-10">报名费用</text>
				<text class="font ml-10">{{ detail.price }}/1人</text>
			</view>
		</view>

		<view class="content_item">
			<image :src="ossUrl + detail.image" style="width: 100%;" mode="widthFix"></image>
			<rich-text :nodes="detail.content"></rich-text>
		</view>

		<view class="back" @click="toHide()" v-if="popFlag"></view>
		<view class="pop_wrap" v-if="popFlag">
			<view class="flex-col section_6">
				<view class="flex-row items-start group_4s">
					<text class="font text_4 text_8">报名信息</text>
					<image class="ml-94 image_9" @click="toHide()" :src="remoteUrl + 'close_btn.png'" />
				</view>
				<view class="flex-col self-stretch group_5">
					<view class="flex-col items-start input">
						<text class="font_4 text_9">个人名称</text>
						<input type="text" class="font_3 text_11 mt-16" placeholder="请输入您的姓名(必填)" @input="bindName" />
					</view>
					<view class="flex-col items-start input mt-22">
						<text class="font_4 text_9">联系电话</text>
						<input type="number" class="font_3 text_11 mt-16" placeholder="请输入您的联系电话(必填)"
							@input="bindMobile" />
					</view>
				</view>
				<view class="flex-col justify-start items-center button text-wrapper" @click="toEnter()">
					<text class="font_2 text_12">去支付</text>
				</view>
			</view>
		</view>

		<view class="bot_btn">
			<view class="btn" :style="!detail.is_start || detail.is_apply ? 'background: #ddd' : ''" @click="toShow()">{{ detail.is_apply ? '已报名' : '我要报名'}}</view>
		</view>
	</view>
</template>

<script>
	import {
		remoteUrl,
		ossUrl
	} from '@/utils/config.js'
	import {
		activityInfo,
		saveActivity
	} from '@/api/forum.js'
	export default {
		data() {
			return {
				ossUrl: ossUrl,
				remoteUrl: remoteUrl,
				nickname: '',
				mobile: '',
				popFlag: false,
				detail: ''
			};
		},
		onLoad(options) {
			this.getActivityInfo(options.id)
		},
		onShareAppMessage(res) { //发送给朋友
			return {
				title: '小程序分享',
				imageUrl: '',
			}
		},
		methods: {
			getActivityInfo(id) {
				activityInfo({
					id
				}).then(res => {
					if (res.code == 1) {
						res.data.is_start = new Date(res.data.end_time).getTime() > new Date().getTime()
						this.detail = res.data
					}
				})
			},
			toShow() {
				if (!this.detail.is_start) return
				this.popFlag = true
			},
			toHide() {
				this.popFlag = false
			},
			bindName(e) {
				this.nickname = e.detail.value
			},
			bindMobile(e) {
				this.mobile = e.detail.value
			},
			toEnter() {
				let that = this
				let reg = /^1[3456789]\d{9}$/;
				if (that.nickname == '') {
					uni.showToast({
						title: '请输入姓名！',
						icon: 'none'
					})
					return
				}
				if (!reg.test(that.mobile)) {
					uni.showToast({
						title: '请输入正确的手机号！',
						icon: 'none'
					})
					return
				}
				saveActivity({
					id: that.detail.id,
					name: that.nickname,
					mobile: that.mobile
				}).then(res => {
					if (res.code == 1) {
						console.log(res)
						wx.cloud.callFunction({
							name: "payActivity",
							data: {
								totalFee: Number(that.detail.price * 100),
								goodName: that.detail.title,
								id: res.data.id
							},
							success: (res) => {
								console.log(res)
								
								const payment = res.result.payment;
								// 调起微信客户端支付
								wx.requestPayment({
									...payment,
									success(res) {
										/* 成功回调 */
										console.log(res)
										setTimeout(() => {
											uni.hideLoading()
										},600)
										setTimeout(() => {
											uni.redirectTo({
												url: '/pages/pages-list/my_publish/my_publish'
											})
										},1000)
									},
									fail(err) {
										/* 失败回调 */
										console.log(err)
									}
								});
							},
							fail: (err) => {
								uni.hideLoading()
								console.log(err)
							}
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.avtivity_wrap {
		padding: 32rpx 28rpx 130rpx 28rpx;

		.title {
			font-size: 34rpx;
			color: #000000;
		}

		.company_item {
			font-size: 22rpx;
			margin: 28rpx 0 35rpx 0;
		}

		.text_4 {
			color: #000000;
			font-size: 32rpx;
		}

		.group_3 {
			margin-top: 28rpx;
		}

		.group_4 {
			margin-right: 16rpx;
			margin-top: 40rpx;
		}

		.group_5 {
			margin-top: 36rpx;

			.text_7 {
				margin-left: 22rpx;
			}

			.text_8 {
				margin-left: 14rpx;
			}
		}

		.image_8 {
			width: 40rpx;
			height: 40rpx;
		}

		.font {
			font-size: 28rpx;
			color: #000000;
		}

		.group_6 {
			margin-top: 40rpx;
		}

		.content_item {
			margin-top: 30rpx;
		}
		.bot_btn {
			width: 100vw;
			height: 108rpx;
			background: #FFFFFF;
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 2;
			display: flex;
			align-items: center;

			.btn {
				width: 650rpx;
				height: 80rpx;
				line-height: 80rpx;
				margin: 0 auto;
				text-align: center;
				color: #fff;
				font-size: 28rpx;
				background: #1C41F1;
				border-radius: 54rpx;
			}
		}

		.back {
			width: 100vw;
			height: 100vh;
			position: fixed;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			z-index: 9;
			background: rgba(0, 0, 0, .5);
		}

		.pop_wrap {
			width: 640rpx;

			position: fixed;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			z-index: 10;

			.section_6 {
				padding-bottom: 60rpx;
				background-color: #ffffff;
				border-radius: 16rpx;

				.group_4s {
					padding: 24rpx 24rpx 6rpx;
					border-radius: 16rpx;

					.font {
						font-size: 34rpx;
						color: #000000;
					}

					.text_4 {
						opacity: 0.9;
					}

					.text_8 {
						margin-left: 230rpx;
						margin-top: 24rpx;
					}

					.image_9 {
						opacity: 0.9;
						width: 38rpx;
						height: 38rpx;
					}
				}

				.group_5 {
					margin-top: 48rpx;
					padding: 0 70rpx;

					.input {
						padding-bottom: 26rpx;
						border-bottom: solid 1rpx #0000001a;

						.font_4 {
							font-size: 26rpx;
							color: #000000;
						}

						.text_9 {
							opacity: 0.5;
						}

						.font_3 {
							font-size: 28rpx;
							color: #000000;
						}

						.text_11 {
							opacity: 0.2;
						}
					}
				}

				.button {
					align-self: center;
					margin-top: 60rpx;

					.font_2 {
						font-size: 32rpx;
						color: #ffffff;
					}
				}

				.text-wrapper {
					padding: 28rpx 0;
					background-color: #1c41f1;
					border-radius: 43rpx;
					width: 500rpx;
				}
			}
		}
	}
</style>